<template>
  <GlobalContainer className="!bg-[#fff]" :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`">
    <GlobalHeader title="修改资料" showBack :fixed="true" :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`" />
    <div class="form-item min-h-400 rounded-8 bg-white px-32 pt-90">
      <div class="label text-30 font-normal leading-45 text-[#303133]">姓名</div>
      <div class="search-input mb-32">
        <div class="form-input flex items-center">
          <input v-model="userName" type="text" placeholder="请输入" />
        </div>
      </div>
    </div>
    <div class="btn-c px-30 py-20 pb-safe">
      <div class="btn" @click="submit">保存</div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import { updateUserInfoApi } from '@/common/api/base'
import { useAccountStore } from '@/store'
import { showToast } from '@/utils/message'

const OSS_URL = import.meta.env.VITE_OSS_URL
const accountStore = useAccountStore()
const userName = ref('')
const submit = () => {
  if (!userName.value) {
    showToast('请输入姓名')
    return
  }
  updateUserInfoApi({
    userName: userName.value,
    realName: userName.value
  }).then(res => {
    if (res) {
      showToast('修改成功')
      accountStore.getUserInfoByToken()
      uni.navigateBack()
    }
  })
}
</script>

<style scoped lang="scss">
.btn-c {
  position: fixed;
  bottom: 12rpx;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
  .btn {
    height: 94rpx;
    background: #1e90ff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    text-align: center;
    line-height: 94rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
.form-item {
  margin-bottom: 30rpx;
  .label {
    font-weight: 400;
    font-size: 30rpx;
    line-height: 46rpx;
    color: #303133;
    margin-bottom: 16rpx;
  }
  .form-input {
    background: #f5f7fa;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 20rpx 24rpx;
    border: 1px solid #dcdfe6;
  }
  :deep(.custom-class) {
    background: #f5f7fa !important;
    font-size: 30rpx;
    color: #303133;
  }
  :deep(.text-area) {
    background: #f5f7fa;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    border: 1px solid #dcdfe6;
  }
  :deep(.wd-textarea__count) {
    background-color: #f5f7fa;
  }
}
</style>
